<template>
  <el-card>
    <div class="recommend">
      <h3 class="applyRecode">推荐评价</h3>
      <el-form  class="form" :model="form" ref="form" label-width="120px">
        <el-form-item class="sea" size="small" label="商品名称：">
          <el-input placeholder="请输入商品名称" v-model="form.search"></el-input>
        </el-form-item>
        <el-form-item class="sea" size="small" label="评价内容：">
          <el-input placeholder="请输入评价内容" v-model="form.ping"></el-input>
        </el-form-item>
        <el-form-item class="send" size="small" label="评价类型：">
          <el-select class="publis" v-model="form.sendit" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <div class="btns"><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="goods" label="商品" align="center"></el-table-column>
        <el-table-column prop="gui" label="规格" align="center"></el-table-column>
        <el-table-column prop="buys" label="买家" align="center"></el-table-column>
        <el-table-column prop="friendly" label="好评类型" align="center" width="90px"></el-table-column>
        <el-table-column prop="assess" label="评价详情" align="center" width="90px"></el-table-column>
        <el-table-column prop="grade" label="评分" align="center" width="90px"></el-table-column>
        <el-table-column prop="times" label="评价时间" align="center" width="90px"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="groom" size="small">取消推荐</el-button>
            <el-button type="text" @click="reply(scope.row)" size="small">回复</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background style="float:right;margin:0 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog class="agrees" title="回复" :visible.sync="hui">
        <el-form :model="form2">
          <el-form-item class="liu" label="">
            <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 8}" placeholder="0-140个字，请回复" v-model="form2.textarea"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="hui = false">取 消</el-button>
          <el-button type="primary" @click="hui = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'recommend',
  data () {
    return {
      hui: false,
      form2: {
        textarea: ''
      },
      currentPage: 1,
      pagesize: 10,
      total: 40,
      form: {
        search: '',
        ping: '',
        sendit: ''
      },
      tableData: [
        {
          goods: '美的小家电',
          gui: '包装单位：件',
          buys: '',
          friendly: '好评',
          assess: '',
          grade: '',
          times: '2018-11-13 18:00:02'
        }
      ],
      items: [
        {
          label: '类型1',
          value: '0'
        },
        {
          label: '类型2',
          value: '1'
        }
      ]
    }
  },
  methods: {
    reply (row) {
      this.hui = true
    },
    groom () {
      this.$confirm('确认取消推荐此条评论', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '确认取消推荐成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    findInit () {
      // this.currentPage = 1
      // this.init()
    },
    handleSizeChange (val) {
      // this.pagesize = val
      // this.init()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // this.currentPage = val
      // this.init()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
.recommend {
  .form {
    display: flex;
    .dates {
      .el-form-item {
        .el-form-item__content {
          .el-date-editor.el-input {
            width: 188px;
          }
        }
      }
      .line {
        padding-left: 90px;
      }
      .zuo {
        margin-left: 21px;
      }
    }
    .send {
      .el-form-item__content {
        .el-select {
          width: 150px;
        }
      }
    }
    .sea {
      .el-form-item__content {
        .el-input {
          width: 195px;
        }
      }
    }
  }
  .tables {
    margin: 15px 0 30px;
  }
  .btns {
    .el-button {
      border-radius: 4px;
      margin-left: 20px;
    }
  }
}
</style>
